<template>
  <l-content :app="app">
    <el-card>
      <el-form :inline="true" size="mini" :model="searchForm" class="demo-form-inline"
               onkeydown="if(event.keyCode==13){return false;}" @keyup.native.enter="onSearch">
        <el-form-item label="航司" prop="airline">
          <el-select v-model="searchForm.airline" @change="onSearch" filterable placeholder="请选择" clearable>
            <el-option v-for="item in airlineOptions" :key="item.key" :label="item.value" :value="item.key"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开启" prop="status">
          <el-radio-group v-model="searchForm.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="替代的航空公司" prop="replaceAir">
          <el-select v-model="searchForm.replaceAirLine" filterable placeholder="请选择" clearable>
            <el-option v-for="item in airlineOptions" :key="item.key" :label="item.value" :value="item.key"/>
          </el-select>
          用于航空公司合并后可以到合并航空公司出票。如GS和CN可以用HU替代
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="plus" @click="onSave">保存</el-button>
        </el-form-item>
      </el-form>
      <!--
        table 根据这个来获取子组件的方法
        tableData 表格数据
        handleSelectionChange 监听选择
        handleCurrentChange 监听翻页事件
        loading 表格加载,！注意，loading的用法和原生的有区别
      -->
      <c-page-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @sort-change="handleSortChange"
        @current-change="handleCurrentChange"
        :loading="loading">
        <el-table-column
          prop="airline"
          label="航空公司"
          sortable='custom'
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="b2bAccount"
          label="登陆账号"
          sortable='custom'
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="b2bPwd"
          label="登录密码"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="使用用户"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="用户所在部门"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <c-pop-button
              size="small"
              type="danger"
              pMsg="确认要删除吗？"
              @click="btn => handleDelete(btn, scope.row)"
            >删除
            </c-pop-button>

          </template>
        </el-table-column>
      </c-page-table>
    </el-card>
    <component :is="dialog" :data="dialogData" @ok="handleCurrentChange(tableData.page)"
               @close="dialog = ''"/>

  </l-content>
</template>

<script>
// 用于查询的参数
const paramForm = {}
export default {
  name: 'AirUserB2bAccountManager',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      airlineOptions: [],
      searchForm: {
        airline: '',
        status: '',
        replaceAirLine: ''
      },
      dialog: '',
      dialogData: {
        detail: {}
      },
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.getSelectData()
    this.handleCurrentChange(1)
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  watch: {
    // 通过监听选择项来判断批量删除按钮是否可用
    multipleSelection (val) {
      this.canDeleteBatch = val.length > 0
    }
  },
  methods: {
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(paramForm, this.searchForm)
      this.handleCurrentChange(1)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      paramForm.sidx = sidx
      paramForm.sord = sord
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.loading = true
      return new Promise((resolve, reject) => {
        // this.pageSize 获取当前每页显示数量,
        this.$service.airUserB2bAccount.queryAirUserB2bAccountPage(currentPage, this.pageSize, paramForm).then(res => {
          this.tableData = res.data
          resolve()
        }).catch(reject).finally(() => {
          this.loading = false
        })
      })
    },
    handleDelete (btn, row) {
      this.$service.airUserB2bAccount.deleteAirUserB2bAccount(row.id).then(() => {
        this.handleCurrentChange(this.tableData.page)
      }).finally(() => {
        btn.isLoading(false)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    getSelectData () {
      this.$service.options.getAirLineOption().then(res => {
        this.airlineOptions = res.data
      })
    },
    onSave () {
      // 不知道要怎么操作
    }
  }
}
</script>

<style scoped>

</style>
